// default-variables
:root {
    --color-basic-50: #ffffff;
    --color-basic-75: #fafafa;
    --color-basic-100: #f8f8f8;
    --color-basic-200: #eaeaea;
    --color-basic-300: #e1e1e1;
    --color-basic-400: #cacaca;
    --color-basic-500: #b3b3b3;
    --color-basic-600: #8e8e8e;
    --color-basic-700: #6e6e6e;
    --color-basic-800: #4b4b4b;
    --color-basic-900: #2c2c2c;

    --body-bg: #f5f6f7;
    --body-color: #000;

    --mainContent-bg: #f5f6f7;

    --postCon-bg: #f6f8fa;
    --postDesc-color: #999;

    --sidebar-bg: #fff;
    --sidebarBlock-border-color: #f5f6f7;
    --sidebarTitle-color: #333;
    --sidebarItem-hover-color: #000;

    --tags-bg: #fff;
    --tags-color: #000;
    --tags-border: #eaeaea;

    --btn-bg-color: #fff;
    --btn-bg-hover-color: #f5f6f7;
    --btn-bg-active-color: #eaeaea;
    --btn-border-color: #eaeaea;

    --footer-bg: #fff;
    --footer-color: #5c5e6e;

    --pager-bg: #fff;
    --pagerBtn-bg: #f5f6f7;

    --listItem-bg: #fff;
    --listItemTitle-bg: #fff;
    --listItemTitle-border-color: #eee;

    --form-bg: #ffffff;
    --formTitle-bg: #f6f8fa;
    --form-border-color: #ccc;
    --formDesc-color: #5c5e6e;

    --commonBody-bg: #eee;
    --commonBody-color: #333;

    --layer-bg: #ccc;
    --layer-color: #fff;

    --ad-bg: #eee;
    --ad-color: #5c5e6e;

    --md-hr-color: #ddd;
    --md-table-border-color: #202234;
    --md-blockquote-bg: #f6f8fa;
    --md-blockquote-color: #202234;
    --md-blockquote-border-color: #ccc;
    --md-summary-bg: #fafafa;
    --md-kbd-bg: #ccc;
    --md-singlelinecode-bg: #eee;

    --searchbar-bg: #fff;
    --searchbar-color: #000;

    --account-bg: #fff;
    --account-color: #64677a;

    --logo-bg: linear-gradient(
        to bottom,
        #fff 0%,
        #fff 76%,
        rgba(21, 23, 40, 0) 100%
    );
    --logo-color: #000;

    --profileMenu-bg: #f8f8f8;
    --profileAvatar-border-color: rgb(240, 239, 239);

    --catalogList-hover: #000;
    --catalog-color: #4d4d4d;
    --dragmenuItem-bg: #eee;

    --calendar-bg: #f6f8fa;

    --postSignature-bg: #f6f8fa;
    --postSignature-border-color: var(--themeColor);

    --scrollbarTrack-bg: rgba(0, 0, 0, 0.01);
    --scrollbarThumb-bg: rgba(0, 0, 0, 0.11);
    --scrollbarThumb-hover-bg: rgba(0, 0, 0, 0.2);

    --card-bg: #fff;
    --color-profile-links: #333;
    --color-profile-links-hover: #d7d8d9;

    --emoji-bg: #fff;

    --color-copy-btn: #5c5e6e;
    --color-catalog-border: #eaeaea;
}

// variables in dark mode
:root[theme='dark'] {
    --color-basic-50: #252525;
    --color-basic-75: #2f2f2f;
    --color-basic-100: #323232;
    --color-basic-200: #3e3e3e;
    --color-basic-300: #4a4a4a;
    --color-basic-400: #5a5a5a;
    --color-basic-500: #6e6e6e;
    --color-basic-600: #909090;
    --color-basic-700: #b9b9b9;
    --color-basic-800: #bdbdbd;
    --color-basic-900: #c2c2c2;

    --body-bg: #373e57;
    --body-color: rgb(245, 246, 247);

    --mainContent-bg: #24273b;

    --postCon-bg: #5c5e6e;
    --postDesc-color: #5c5e6e;

    --sidebar-bg: #151728;
    --sidebarBlock-border-color: #272a3a;
    --sidebarTitle-color: #5c5e6e;
    --sidebarItem-hover-color: #fff;

    --tags-bg: #303447;
    --tags-color: #fff;
    --tags-border: #eaeaea;

    --btn-bg-color: #151728;
    --btn-bg-hover-color: #202234;
    --btn-bg-active-color: #5c5e6e;
    --btn-border-color: #eaeaea;

    --footer-bg: #24273b;
    --footer-color: #5c5e6e;

    --pager-bg: #151728;
    --pagerBtn-bg: #202234;

    --listItem-bg: #202234;
    --listItemTitle-bg: #202234;
    --listItemTitle-border-color: #202234;

    --form-bg: #151728;
    --formTitle-bg: #202234;
    --form-border-color: #202234;
    --formDesc-color: #5c5e6e;

    --commonBody-bg: #202234;
    --commonBody-color: #fff;

    --layer-bg: #202234;
    --layer-color: #fff;

    --ad-bg: #202234;
    --ad-color: #5c5e6e;

    --md-hr-color: #5c5e6e;
    --md-table-border-color: #202234;
    --md-blockquote-bg: #515363;
    --md-blockquote-color: #eaeaea;
    --md-blockquote-border-color: var(--themeColor);
    --md-summary-bg: #3d4052;
    --md-kbd-bg: #202234;
    --md-singlelinecode-bg: #24273b;

    --searchbar-bg: #151728;
    --searchbar-color: #fff;

    --account-bg: #151728;
    --account-color: #64677a;

    --logo-bg: linear-gradient(
        to bottom,
        #151728 0%,
        #151728 76%,
        rgba(21, 23, 40, 0) 100%
    );
    --logo-color: #fff;

    --profileMenu-bg: #151728;
    --profileAvatar-border-color: #151728;

    --catalogList-hover: #fff;
    --catalog-color: #9c9cab;
    --dragmenuItem-bg: #24273b;

    --calendar-bg: #202234;

    --postSignature-bg: #24273b;
    --postSignature-border-color: var(--themeColor);

    --scrollbarTrack-bg: rgba(255, 255, 255, 0.01);
    --scrollbarThumb-bg: rgba(255, 255, 255, 0.11);
    --scrollbarThumb-hover-bg: rgba(255, 255, 255, 0.2);

    --card-bg: #151728;
    --color-profile-links: rgb(156, 156, 171);
    --color-profile-links-hover: #1b1d2e;

    --emoji-bg: #303447;

    --color-copy-btn: #9c9cab;
    --color-catalog-border: #272a3a;
}
